<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>p2_CSS选择器</title>
        <style>
            /*1.标签名选择器*/
            h4{
                color:red;
            }
            div{
                width: 100px;
                height: 100px;
                background-color:yellow;
            }
            /*2.id选择器*/
            #h2{
                background-color: yellow;
            }
            /*3.class类选择器*/
            .error{
                background-color: red;
            }
            .success{
                background-color:green;
            }
            .msg{
                color:white;
            }
            /*4.群组选择器 是"或"的关系,只要满足其中一个条件就可以*/
            #h2,.error,p{
                border: 5px solid purple;/*边框:粗细 线型 颜色*/
            }
            /*5.通用选择器:选中所有元素*/
            *{
                font-style: italic;/*文字样式:斜体 */
            }
            /*6.属性选择器*/
            [type="text"]{
                background-color: cyan;
            }
            /*7.选择器紧挨着写是"与"的关系,必须同时都满足才能生效*/
            /*:hover伪类选择器的一种,选中悬停在元素时的状态*/
            #d1:hover{
                background-color: purple;
            }
            /*伪类选择器:link未被访问过 :visited已被访问过 :hover悬停 :active激活*/
            a:link{
                color:gray;
            }
            a:visited{
                color:green;
            }
            a:hover{
                color: orange;
            }
            a:active{
                color:red;
            }
            /*后代选择器(空格):选中包含在内的所有下层元素=>儿子,孙子,重孙子...*/
            #d2 span{
                background-color: blue;
            }
            /*直接子代选择器(大于号):选中当前元素的直接子元素,不会继续向下选择*/
            #d2>div>span{
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="d2">
            <span>111</span>
            <div>
                <span>222</span>
                <p>测试文字</p>
                <p>我是<span>测试</span>段落</p>
            </div>
            <span>333</span>
        </div>


        <hr>
        <h4>我是标题</h4>
        <p>我是段落</p>
        <a href="#">我是超链接</a>
        <h4 id="h2">我是标题2</h4>
        <div id="d1">我是div1</div>
        <div>我是div2</div>
        <div>我是div3</div>
        <br>

        <span class="error msg">用户名不能为空</span>
        <span class="error msg">密码不能为空</span>
        <span class="success msg">用户名格式正确</span>
        <span class="success msg">密码格式正确</span>
        <hr>
        <input type="text">
        <input type="password">
        <hr>
        <a href="https://www.baidu.com/">超链接1</a>
        <a href="abc">超链接2</a>

    </body>
</html>